<template>
    <div class="account_set_sync_data_container">
        <el-form ref="modifyForm" :model="formData" status-icon :rules="rules"
                 class="demo-ruleForm" style="padding-top: 18px;">
            <el-form-item label="表名称" prop="table_name">
                <el-select v-model="formData.table_name" style="width:260px;">
                    <el-option v-for="(item, index) in tableList" :key="index"
                               :label="item.name" :value="item.name" />
                </el-select>
                <el-button type="primary" @click="getList()" v-btnLoading>查询</el-button>
            </el-form-item>
        </el-form>
        <vxe-table-template :data="dataList" :options.sync="tableOptions"
                            @event="handleTableEvent" />
    </div>
</template>
<script>

export default {
    name: 'AccountSetSyncData',
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    provide() {
        return {
            setChildrenRef: (name, ref) => {
                this[name] = ref;
            },
        };
    },
    data() {
        const _this = this;
        return {
            tableList: [
                { "name": "common_parameter_value" },
                { "name": "sys_setting" },
            ],
            rules: {
                table_name: [ { required: true, message: '请选择表名', trigger: 'blur' } ],
            },
            formData: {
                table_name: undefined,
                account_set_sid: undefined,
            },
            dataList: [],
            selectionList: [],
            tableOptions: {
                ref: "ResTable",
                container: "#resource_container",
                multiSelect: true,
                reserveSelection: true,
                rowKey: "sid",
                columns: [
                    {
                        label: "sid",
                        prop: "sid",
                        align: "center",
                    },
                    {
                        label: "name",
                        prop: "name",
                        align: "center",
                    },
                    {
                        label: "create_date",
                        prop: "create_date",
                        align: "center",
                    },
                ],
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                },
            },
            //弹窗option
            dialogOption: {
                visible: false,
            },
        };
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            _this.dataList = [];
            _this.selectionList = [];
            _this.formData = $.extend({}, { account_set_sid: _this.propsData.row.sid });
        },
        async getList() {
            const _this = this;
            let valid = await _this.validateForm('modifyForm');
            if (!valid) {
                return false;
            }
            let queryData = $.extend({}, _this.formData);
            return _this.fetchData(_this.$api.API_FindSyncSrcList, queryData).then(result => {
                _this.dataList = result.data || [];
            });
        },
        handleTableEvent(event) {
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('modifyForm');
            if (valid) {
                let subData = $.extend({}, _this.formData);
                subData.list = _this.selectionList;
                return _this.fetchData(_this.$api.API_SaveSyncDataList, subData).then(() => {
                    _this.$message.success('更新成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
};
</script>
<style lang="less" rel="stylesheet/less">
.account_set_sync_data_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
